
import StyleMgr from "@/core/createCssClass"
let bodyContainer:HTMLElement = document.createElement("div"),
    backgroundCanvas:HTMLCanvasElement =  document.createElement("canvas"),
    currentGridInfo = {
        gridWidth:0,
        gridHeight:0
    };
interface IElmenetLocationSize{
    top:number;
    left:number;
    width:number;
    height:number;
}
const ElementLocationSizeMap = new Map<HTMLElement,IElmenetLocationSize>();
export default function desingerCreater(container: HTMLElement, editEnabled: boolean = false) {
    if (editEnabled) {
        bodyContainer = container;
        var canvas = document.createElement("canvas");
        backgroundCanvas = canvas;
        canvas.setAttribute("class", "background-canvas");
        canvas.setAttribute("width", container.offsetWidth + 'px');
        canvas.setAttribute("height", container.offsetHeight + 'px');
        let gridWidth:number =  container.offsetWidth / 24,
            gridHeight:number = container.offsetHeight / 24;
            currentGridInfo = {
                gridWidth,
                gridHeight
            }
        let context = canvas.getContext("2d");
        document.body.appendChild(canvas);
        window.addEventListener("resize", windwReszie, false);
        context && drawGrid(context, "#ccc", gridWidth, gridHeight);
        const moveTarget = createStructElement();
        moveTarget && dragBox(moveTarget, document.body);
    }
}

function windwReszie(){
    const gridWidth = bodyContainer.offsetWidth / 24;
    const gridHeight = bodyContainer.offsetHeight / 24;
    backgroundCanvas.setAttribute("width", bodyContainer.offsetWidth + 'px');
    backgroundCanvas.setAttribute("height", bodyContainer.offsetHeight + 'px');
    currentGridInfo = {
        gridWidth,
        gridHeight
    }
    let context = backgroundCanvas.getContext("2d");
    if (context) {
        context.clearRect(0, 0, bodyContainer.offsetWidth, bodyContainer.offsetHeight);
        drawGrid(context, "#ccc", gridWidth, gridHeight);
    }
    ElementLocationSizeMap.forEach((ElmenetLocationSize,element,map)=>{
        element.style.width = ElmenetLocationSize.width*gridWidth+"px";
        element.style.height = ElmenetLocationSize.top*gridHeight+"px";
        element.style.top = ElmenetLocationSize.top*gridHeight+"px";
        element.style.left = ElmenetLocationSize.left*gridWidth+"px";
    });
}

function createStructElement(
    initTop:number = 2,
    initLeft:number = 2,
    initWidth:number = 3,
    initHeight:number = 2
){
    const element = document.createElement("div");

    let gridWidth = bodyContainer.offsetWidth / 24;
    let gridHeight = bodyContainer.offsetHeight / 24;
    element.setAttribute("style",
        `position: absolute;z-index:1;background:#f00;
        width:${gridWidth*initWidth}px;
        height:${gridHeight*initHeight}px;
        top:${initTop * gridHeight}px;
        left:${initLeft * gridWidth}px;`);
        ElementLocationSizeMap.set(element,{
            top:initTop,
            left:initLeft,
            width:initWidth,
            height:initHeight
        })
    document.body.appendChild(element);
    return element;
}

function drawGrid(context: CanvasRenderingContext2D, color: string, stepx: number, stepy: number) {
    context.strokeStyle = color;
    context.lineWidth = 0.5;

    const containerWidth = context.canvas.offsetWidth,
        containerHeight = context.canvas.offsetHeight;

    for (var i = stepx + 0.5; i < containerWidth; i += stepx) {
        context.beginPath();
        context.moveTo(i, 0);
        context.lineTo(i, containerHeight);
        context.stroke();
    }

    for (var i = stepy + 0.5; i < containerHeight; i += stepy) {
        context.beginPath();
        context.moveTo(0, i);
        context.lineTo(containerWidth, i);
        context.stroke();
    }
}



var dragBox = function (drag:HTMLElement, wrap:HTMLElement) {

    function getCss(ele:HTMLElement, prop:any) {
        return parseInt(window.getComputedStyle(ele)[prop]);
    }

    var initX:number = 0,
        initY:number = 0,
        dragable = false,
        wrapLeft = getCss(drag, "left"),
        wrapRight = getCss(drag, "top");

    drag.addEventListener("mousedown", function (e) {
        dragable = true;
        initX = e.clientX;
        initY = e.clientY;
    }, false);

    wrap.addEventListener("mousemove", function (e) {
        if (dragable) {
            const nowX = e.clientX,
                nowY = e.clientY,
                disX = nowX - initX,
                disY = nowY - initY,
                leftLocation = wrapLeft + disX,
                topLocation = wrapRight + disY;
            drag.style.left = leftLocation + "px";
            drag.style.top = topLocation + "px";
            let currentEventTarget = <HTMLElement>e.target;
            if(!currentEventTarget)
                return;
            let nextTop = ElementLocationSizeMap.get(currentEventTarget)?.top,
                nextLeft = ElementLocationSizeMap.get(currentEventTarget)?.left;
            if((leftLocation % currentGridInfo.gridWidth) < currentGridInfo.gridWidth/2){
                //新的leftLocation就在这个位置
                nextLeft = Math.floor(leftLocation/currentGridInfo.gridWidth);
            }else{
                nextLeft = Math.floor(leftLocation/currentGridInfo.gridWidth) + 1;
            }
            if((topLocation % currentGridInfo.gridHeight) < currentGridInfo.gridHeight/2){
                nextTop = Math.floor(topLocation/currentGridInfo.gridHeight);
            }else{
                nextTop = Math.floor(topLocation/currentGridInfo.gridHeight) + 1;
            }
            ElementLocationSizeMap.set(currentEventTarget,{
                top:nextTop,
                left:nextLeft,
                width:ElementLocationSizeMap.get(currentEventTarget)?.width || 0,
                height:ElementLocationSizeMap.get(currentEventTarget)?.height || 0
            })
            // console.log(`应该移动到的位置：top：${nextTop},left:${nextLeft},width:${ElementLocationSizeMap.get(currentEventTarget)?.width},height:${ElementLocationSizeMap.get(currentEventTarget)?.height}`)
            // ElementLocationSizeMap
        }
    });

    wrap.addEventListener("mouseup", function (e) {
        dragable = false;
        wrapLeft = getCss(drag, "left");
        wrapRight = getCss(drag, "top");
        let currentEventTarget = <HTMLElement>e.target;
        if(!currentEventTarget)
            return;
        const currentLocation = ElementLocationSizeMap.get(currentEventTarget);
        if(!currentLocation)
            return;
        currentEventTarget.style.left = currentLocation.left*currentGridInfo.gridWidth + "px";
        currentEventTarget.style.top = currentLocation.top*currentGridInfo.gridHeight + "px";
    }, false);

};

